<template>
  <div class="c-bg-sgray c-pb120" v-if="shopInfo">
    <!-- 编辑或者添加评价 -->
    <section class=" c-bg-white c-pv24 c-ph24">
      <div class="c-flex-row c-pb10">
        <div class="c-ww150 c-hh150 c-text-hidden c-br10">
          <img :src="$addXossFilter(shopInfo.avatar, require('@/assets/defult270.png'))" class="c-w100 c-h c-br10 imgCloseBig c-object-fit-cover" />
        </div>
        <div class="c-flex-row c-justify-start c-flex-grow1 c-w0 c-pl20">
          <div class="c-flex-column c-justify-start c-flex-grow1 c-w0">
            <div class="c-fs24 c-text-ellipsis1 c-lh34">{{shopInfo.name}}</div>
            <div class="c-fs20 c-fc-gray c-mt20" v-if="shopInfo.subSpecs">
              <collapse :default-height="52">
                <div>规格：{{shopInfo.subSpecs}}</div>
              </collapse>
            </div>
          </div>
          <div class="c-flex-column c-justify-start c-aligni-end">
            <span class="c-fs24 c-fc-xblack">{{'￥' | iosPriceFilter}}{{shopInfo.price}}</span>
            <span class="c-fs20 c-fc-gray c-mt20">x {{shopInfo.quantity}}</span>
          </div>
        </div>
      </div>
    </section>
    <section class="c-mt12 c-bg-white c-ph24">
      <div class="c-flex-row c-aligni-center c-pv24 c-fs24 c-fc-xblack c-bd-b1" @click="clickShowExpressState">
        <span class="c-flex-grow1 c-w0">货物状态</span>
        <span class="c-fs20" :class="expressState == 0 ? 'c-fc-sgray' : 'c-fc-xblack'">{{expressState == 0 ? '请选择' : expressStateMap[expressState].name}}<i class="iconfont c-fs20 c-fc-sgray c-pl12" v-if="refundType != 1 && refundType != 2">&#xe60e;</i></span>
      </div>
      <div class="c-flex-row c-aligni-center c-pv24 c-fs24 c-fc-xblack c-bd-b1" @click="clickShowReason">
        <span class="c-flex-grow1 c-w0">退款原因</span>
        <span class="c-fs20" :class="refundReason == 0 ? 'c-fc-sgray' : 'c-fc-xblack'">{{refundReason == 0 ? '请选择' : refundReasonMap[refundReason]}}<i v-if="refundReason != 13" class="iconfont c-fs20 c-fc-sgray c-pl12">&#xe60e;</i></span>
      </div>
      <div class="c-flex-row c-aligni-center c-pv24 c-fs24 c-fc-xblack" @click="showEditBackMoney">
        <span class="c-flex-grow1 c-w0 c-fs24 c-fc-xblack">退款金额</span>
        <span class="c-fs24 theme-fc">{{'￥' | iosPriceFilter}}{{refundMoney}}<i class="iconfont c-fs20 c-fc-sgray c-pl12">&#xe60e;</i></span>
      </div>
      <div class="c-fs20 c-fc-sgray c-pb24">最多可退{{isCanUseGiftCard == 1 ? 0 : shopInfo.maxRefundMoney}}（含运费{{isCanUseGiftCard == 1 ? 0 : shopInfo.postage}}），退款将返还实际支付金额</div>
    </section>
    <section class="c-mt12 c-bg-white c-pv24 c-ph24">
      <div class="c-fs24 c-fc-xblack">补充描述和凭证</div>
      <div class="c-p c-mt22 c-bd1 c-br8 c-pt20 c-ph22 c-pb34 c-hh150">
        <textarea ref="explanation" placeholder="补充描述，有助于商家更好的处理售后问题" maxlength="200" v-model="explanation" class="c-w100 c-h c-fc-xblack c-fs20 c-lh28 c-bd0"/>
        <span class="c-fc-sgray c-fs20 c-pa c-p-r20 c-p-b16">{{!explanation || explanation.length == 0 ? 0 : explanation.length}}/200</span>
      </div>
      <div class="c-flexw-wrap c-flex-row c-mt24">
        <div v-for="(imgItem,index) in proofPics" :key="index" class="c-ww188 c-hh188 c-br10 c-text-hidden c-mb10 c-flex-row c-flex-center c-p" :class="(index + 1) % 3 == 0 ? '':'c-mr12'">
          <div @click="delUploadImage(index)" class="del-img iconfont">&#xe8fd;</div>
          <img @click="clickPreviewImage(index,imgItem,proofPics)" class="c-w100 c-h c-object-fit-cover" :src="$addXossFilter(imgItem)" alt=""/>
        </div>
        <div v-if="(proofPics && proofPics.length < 6) || !proofPics" class="c-ww188 c-ww188 c-flex-row c-flex-center c-p">
          <div class="c-ww188 c-hh188 c-flex-row c-flex-center c-bd-dash-e6 c-br10 c-text-hidden" @click="clickPreAddPic">
            <div class="c-flex-column c-aligni-center c-justify-center">
              <i class="iconfont c-fs40 c-fc-xblack">&#xe689;</i>
              <span class="c-fc-xblack c-fs20 c-lh28 c-mt10">添加照片</span>
              <span class="c-fc-xblack c-fs20 c-lh28">(最多六张)</span>
            </div>
          </div>
          <input class="c-pa c-opacity0 c-p-t0 c-p-l0 c-ww188 c-hh188 c-fs10" v-if="!isWeiXin" name="file" type="file" accept="image/*" @change="clickPreAddPic" />
        </div>
      </div>
    </section>
    <footer class="order-fotter c-bg-white c-hh104 c-flex-row c-justify-end c-ph24 c-pv12">
      <div class="theme-bg c-br36 c-flex-row c-aligni-center c-justify-center c-fc-white c-mlr-auto c-fs24 c-lh34 c-ww600 c-hh64" @click="clickRefund">提交</div>
    </footer>

    <!-- 编辑退款金额 -->
    <div v-show="showBackMoneyEdit" class="c-pz1002 c-w100 c-h c-pf c-p-l0 c-p-t0 c-flex-row c-flex-center">
      <div class="c-translucent-balck50 c-text-hidden c-pz-1 c-w100 c-h c-pa c-p-l0 c-p-t0" @click="showBackMoneyEdit = false;" data-type='cancel'></div>
      <div class="c-ww540 c-bg-white c-flex-column c-pz1 c-br20">
        <div class="c-fs28 c-textAlign-c c-pt50 c-fw-b c-lh">退款金额</div>
        <div class="c-ph30 c-pv40">
          <div class="c-w100 c-fs20 c-lh64 c-br10 c-bd1 c-p">
            <input type="number" step="0.01" min="0" v-on:input="keyUpConfirm" autofocus="autofocus" placeholder="请输入退款金额" v-model="editMoney" class="c-w100 c-bd0 c-text-indent20 c-h c-lh48 c-br10 c-fs26 c-pl30 c-pr80" />
          </div>
        </div>
        <footer class="c-fs20 c-flex-row c-fs28 c-bd-t1">
          <div @click="cancelSaveMoney" class="c-hh88 c-flex-row c-flex-center c-flex-grow1 c-w0 c-fc-gray c-bd-r1">取消</div>
          <div @click="saveBackMoney" class="c-hh88 c-flex-row c-flex-center c-flex-grow1 c-w0 theme-fc">保存</div>
        </footer>
      </div>
    </div>

    <!-- 售后理由 -->
    <open-modal :openModal='showReason' @closeModal='cancelShowReason'>
      <div class="c-br-tl20 c-br-tr20 c-bg-white">
        <div class="c-p c-pb24">
          <div class="c-w100 c-textAlign-c c-fs28 c-pt24 c-fc-sblack">退款原因</div>
          <i class="iconfont c-pa c-p-t24 c-p-r24 c-fc-sgray c-fs20 c-bg-f6 c-ww30 c-hh30 c-brp50 c-flex-row c-flex-center" @click="cancelShowReason">&#xe8fd;</i>
          <div class="c-p c-mb12 c-ph24 c-contexty-scroll c-maxh500">
            <div class="c-fc-xblack c-fs24 c-flex-row c-aligni-center c-justify-sb c-pv24 c-bd-b1-mgray" @click="clickReason(index + 1)" v-for="(item, index) in reasonMap.filter(item => item.type != 0)" :key="index">
              <span>{{item.name}}</span>
              <span class="iconfont c-fs32 c-fc-sgray" v-show="item.isChecked != 1">&#xe797;</span>
              <span class="iconfont c-fs32 theme-fc" v-show="item.isChecked == 1">&#xe6b1;</span>
            </div>
          </div>
          <div class="theme-bg c-br36 c-flex-row c-aligni-center c-justify-center c-fc-white c-mlr-auto c-fs24 c-lh34 c-ww600 c-hh64 c-mt80" @click="confirmRefundReason">确定</div>
        </div>
      </div>
    </open-modal>

    <!-- 货运状态 -->
    <open-modal :openModal='showExpressState' @closeModal='cancelShowExpressState'>
      <div class="c-br-tl20 c-br-tr20 c-bg-white">
        <div class="c-p c-pb24">
          <div class="c-w100 c-textAlign-c c-fs28 c-pt24 c-fc-sblack">货物状态</div>
          <i class="iconfont c-pa c-p-t24 c-p-r24 c-fc-sgray c-fs20 c-bg-f6 c-ww30 c-hh30 c-brp50 c-flex-row c-flex-center" @click="cancelShowExpressState">&#xe8fd;</i>
          <div class="c-p c-mb12 c-ph24 c-contexty-scroll">
            <div class="c-fc-xblack c-fs24 c-flex-row c-aligni-center c-justify-sb c-pv24 c-bd-b1-mgray" @click="clickExpressState(item.type, index + 1)" v-for="(item, index) in expressStateMap.filter(item => item.type != 0)" :key="index">
              <span>{{item.name}}</span>
              <span class="iconfont c-fs32 c-fc-sgray" v-show="item.isChecked != 1">&#xe797;</span>
              <span class="iconfont c-fs32 theme-fc" v-show="item.isChecked == 1">&#xe6b1;</span>
            </div>
          </div>
          <div class="theme-bg c-br36 c-flex-row c-aligni-center c-justify-center c-fc-white c-mlr-auto c-fs24 c-lh34 c-ww600 c-hh64 c-mt80" @click="confirmExpressState">确定</div>
        </div>
      </div>
    </open-modal>
  </div>
</template>
<script>
import { utilJs, wxUtilJs } from "@/utils/common.js";
import OpenModal from "@/components/templates/common/openModal.vue";
import collapse from "@/components/templates/common/collapse.vue";
let godId = '';
let gorId = '';
let serverIdImgArr = []; //临时存放的上传图片searveID
let imgData = {};
let reasonMap1 = [ // 未发货仅退款理由原因
    {type: 0, name: '请选择'},
    {type: 1, name: '订单信息拍错'},
    {type: 2, name: '多拍/拍错/不想要'},
    {type: 3, name: '地址/电话填写有误'},
    {type: 5, name: '发货/物流问题'},
    {type: 6, name: '缺货'},
    {type: 7, name: '拍多了'},
    {type: 8, name: '协商一致退款'},
    {type: 9, name: '其他'},
];
let reasonMap2 = [ // 已发货仅退款理由原因
    {type: 0, name: '请选择'},
    {type: 1, name: '订单信息拍错'},
    {type: 2, name: '多拍/拍错/不想要'},
    {type: 3, name: '地址/电话填写有误'},
    {type: 5, name: '发货/物流问题'},
    {type: 7, name: '拍多了'},
    {type: 8, name: '协商一致退款'},
    {type: 11, name: '商品损坏/与描述不一致'},
    {type: 9, name: '其他'},
];
let reasonMap3 = [ // 退货退款理由原因
    {type: 0, name: '请选择'},
    {type: 2, name: '多拍/拍错/不想要'},
    {type: 7, name: '拍多了'},
    {type: 8, name: '协商一致退款'},
    {type: 11, name: '商品损坏/与描述不一致'},
    {type: 12, name: '质量问题'},
    {type: 9, name: '其他'},
]
export default {
  name: 'ApplyRefund',
  components: {
    OpenModal,
    collapse
  },
  data() {
    return {
      isWeiXin: true,
      explanation: '', //	售后说明
      proofPics: [], // 凭证图片
      shopInfo: null, // 退款商品信息
      showReason: false, // 判断展示退货原因
      reasonMap: [],
      refundReasonMap: {
        '1': '订单信息拍错',
        '2': '多拍/拍错/不想要',
        '3': '地址/电话填写有误',
        '4': '没用/少用优惠',
        '5': '发货/物流问题',
        '6': '缺货',
        '7': '拍多了',
        '8': '协商一致退款',
        '9': '其他',
        '11': '商品损坏/与描述不一致',
        '12': '质量问题',
        '13': '未付尾款，申请退定金'
      },
      isConfirmRefundReason: false,
      refundReason: 0,
      showExpressState: false, // 判断展示退货原因
      expressStateMap: [ // 货运物流原因
        {type: 0, name: '请选择'},
        {type: 1, name: '未收到货'},
        {type: 2, name: '已收到货'}
      ],
      expressState: 0,
      type: 1, // 1退款 2退货退款
      refundMoney: 0, // 退款金额
      refund: null, // 售后信息
      refundReasonModalIndex: 0, // 售后理由索引
      expressStateModalIndex: 0, // 货运状态索引
      showBackMoneyEdit: false, // 是否展示价格编辑框
      editMoney: '', // 编辑金额
      imageCount: 6,
      refundType: 1, // 售后类型 1、未发货仅退款 2、已发货仅退款 3、退货退款
      isCanUseGiftCard: 0
    }
  },
  watch: {
  },
  methods: {
    keyUpConfirm() {
      this.editMoney = this.editMoney.match(/\d+(\.\d{0,2})?/) ? this.editMoney.match(/\d+(\.\d{0,2})?/)[0] : ''
    },
    // 展示退款金额编辑
    showEditBackMoney() {
      if (this.isCanUseGiftCard == 1) return
      this.showBackMoneyEdit = true;
    },
    // 保存退款金额
    saveBackMoney() {
      this.showBackMoneyEdit = false;
      if (this.editMoney * 1 > this.shopInfo.maxRefundMoney * 1) {
        this.$showCjToast({
          text: '填写金额不能大于可退款金额',
          type: 'warn'
        });
        return
      }
      this.refundMoney = this.editMoney;
    },
    // 取消保存退款金额
    cancelSaveMoney() {
      this.editMoney = this.refundMoney;
      this.showBackMoneyEdit = false;
    },
    // 取消展示货运状态
    cancelShowExpressState() {
      if (this.expressState != this.expressStateModalIndex) {
        this.expressStateMap.forEach((item, index) => {
          this.$set(this.expressStateMap[index], 'isChecked', -1);
        })
        this.expressStateModalIndex = 0;
      }
      this.showExpressState = false;
    },
    // 点击展示货运状态
    clickShowExpressState() {
      if (this.refundType == 2 || this.refundType == 1) return
      if (this.expressState != 0) this.$set(this.expressStateMap[this.expressState], 'isChecked', 1);
      this.showExpressState = true;
    },
    // 点击选择货运状态
    clickExpressState(index) {
      this.expressStateModalIndex = index;
      this.expressStateMap.forEach((item, i) => {
        this.$set(this.expressStateMap[i], 'isChecked', -1);
      })
      this.$set(this.expressStateMap[this.expressStateModalIndex], 'isChecked', 1);
      if (this.refundType == 1) {
        this.reasonMap.forEach((item, index) => {
          this.$set(this.reasonMap[index], 'isChecked', -1);
        })
      } else if (this.refundType != 1 && this.refundType != 2) {
        this.reasonMap = this.expressStateModalIndex == 1 ? reasonMap1 : reasonMap2;
      }
    },
    // 确认货运状态
    confirmExpressState() {
      this.showExpressState = false;
      this.expressState = this.expressStateModalIndex;
      this.refundReason = 0;
    },
    // 取消展示售后原因
    cancelShowReason() {
      if (this.isConfirmRefundReason == false) {
        this.reasonMap.forEach((item, index) => {
          this.$set(this.reasonMap[index], 'isChecked', -1);
        })
        this.refundReasonModalIndex = 0;
      }
      this.showReason = false;
      this.isConfirmRefundReason = false;
    },
    // 点击展示售后原因
    clickShowReason() {
      if (this.refundReason == 13) return // 退定金默认展示原因 不能选择
      if (this.expressState == 0) {
        this.$showCjToast({
          text: '请选择货物状态',
          type: 'warn'
        });
        return
      }
      let index = this.reasonMap.findIndex(item => item.type == this.refundReason);
      this.$set(this.reasonMap[index], 'isChecked', 1);
      this.showReason = true;
      this.isConfirmRefundReason = false;
    },
    // 点击退货理由
    clickReason(index) {
      this.refundReasonModalIndex = index;
      this.reasonMap.forEach((item, index) => {
        if (index == this.refundReasonModalIndex) {
          console.log(index);
          this.$set(this.reasonMap[index], 'isChecked', 1);
        } else {
          this.$set(this.reasonMap[index], 'isChecked', -1);
        }
      })
    },
    // 确认售后理由
    confirmRefundReason() {
      this.showReason = false;
      let type = this.reasonMap.filter((item, index) => index == this.refundReasonModalIndex).length > 0 ? this.reasonMap.filter((item, index) => index == this.refundReasonModalIndex)[0].type : 0;
      this.refundReason = type;
    },
    // 点击提交售后信息
    clickRefund() {
      if (this.expressState == 0) {
        this.$showCjToast({
          text: '请选择货物状态',
          type: 'warn'
        });
        return
      } else if (this.refundReason == 0) {
        this.$showCjToast({
          text: '请选择退款原因',
          type: 'warn'
        });
        return
      }
      let data = {
        godId: godId,
        type: this.refundType == 2 ? 2 : this.type,
        refundMoney: this.refundMoney,
        refundReason: this.refundReason,
        explanation: this.explanation,
        proofPics: this.proofPics,
        takeStatus: this.expressState
      }
      if (gorId != '') data.gorId = gorId;
      utilJs.postMethod(
        global.apiurl + "mall/applyRefund", data, (res) => {
          let id = res; // 售后订单id
          this.$routerGo(this, "replace", {
            path: '/mall/mallOrder/orderAfterSales',
            query: ({godId: godId, gorId: id})
          })
        }
      )
    },
    // 获取商品信息
    getShopRefund() {
      let url = gorId != '' ? `godId=${godId}&gorId=${gorId}` : `godId=${godId}`
      utilJs.getMethod(
        global.apiurl + "mall/getRefund?" + url, (res) => {
          this.shopInfo = res && res.good ? res.good : null;
          this.refund = res && res.refund ? res.refund : null;
          this.refundMoney = this.isCanUseGiftCard == 1 ? 0 : (this.refund ? this.refund.refundMoney : this.shopInfo.maxRefundMoney);
          if (this.refund) {
            this.type = this.refund.type; // 售后类型，1-退款，2-退款退货
            this.refundReason = this.refund.refundReason;
            this.explanation = this.refund.explanation;
            this.proofPics = this.refund.proofPics;
            this.expressState = this.refund.takeStatus;
            this.editMoney = this.refund.refundMoney;
            if (this.type == 2) {
              this.reasonMap = reasonMap3;
              this.expressState = 2;
              this.refundType = 2;
            } else {
              this.reasonMap = this.refund.takeStatus == 1 ? reasonMap1 : reasonMap2;
            }
            this.reasonMap.forEach((item, index) => {
              this.$set(this.reasonMap[index], 'isChecked', -1);
            })
          } else {
            this.editMoney = this.refundMoney;
          }
        }
      )
    },
    // 图片预览
    clickPreviewImage(index, imgUrl, imgs) {
      if (!imgUrl) {
        return;
      }
      let imgArr = [];
      for (let key of imgs) {
        imgArr.push(key);
      }
      wxUtilJs.previewImage({
        current: imgUrl, // 当前显示图片的http链接
        urls: imgArr // 需要预览的图片http链接列表
      });
    },
    clickPreAddPic(event) {
      if (this.$refs.explanation) {
        this.$refs.explanation.blur()
      }
      setTimeout(() => {
        this.clickAddPic(event)
      }, 200)
    },
    // 上传图片
    clickAddPic(event) {
      if (this.proofPics && this.proofPics.length == 6) {
        return
      }
      let that = this;
      if (that.isWeiXin) {
        wxUtilJs.chooseImage({
          count: that.imageCount, // 默认9
          sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"] // 可以指定来源是相册还是相机，默认二者都有
        }).then(localIds => {
          that.$loading.show({
            text: "上传中..."
          });
          serverIdImgArr = [];
          //获取剩余能传多少张图片，若已选的图片数量大于剩余数。则只传剩余数量的图片
          let residueLength = 9 - this.proofPics.length;
          if (localIds.length > residueLength) {
            localIds.length = residueLength;
          }
          this.wxUploadImg(localIds, localIds.length - 1);
        })
      } else {
        utilJs.imgUpload(event.target.files, imgData, 'refund', res => {
          if (res.length > 0) {
            that.proofPics.push(res);
          }
        }, fRes => { });
      }
    },
    //上传图片到微信-----IOS不能一次性传多张，只好递归传
    wxUploadImg(localIds, localIdsLength) {
      wxUtilJs
        .uploadImage({ localId: localIds[localIdsLength] }, true)
        .then(res => {
          serverIdImgArr.push(res);
          if (localIdsLength > 0) {
            this.wxUploadImg(localIds, --localIdsLength);
          } else {
            this.syncUploadPic(serverIdImgArr);
          }
        });
    },
    //上传图片到服务器
    syncUploadPic(serverIdArr) {
      utilJs.postMethod(
        global.apiurl + "common/forms/wxUploadImg",
        {
          serverId: JSON.stringify(serverIdArr),
          mediaType: 2
        },
        res => {
          this.$loading.hide();
          if (res.length > 0) {
            this.proofPics = [...this.proofPics, ...res];
            this.imageCount = 6 - this.proofPics.length;
          }
        },
        failRes => {
          this.$loading.hide();
        }
      );
    },
    // 删除图片
    delUploadImage(index) {
      this.proofPics.splice(index, 1);
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "", "", "", function () { }, true);
    },
    //手机端分享
    appShare: function () {
      var shareUrl =
        window.location.href.split("#")[0] +
        "#/?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("", "", shareUrl, "");
    },
  },
  created() {
    this.currentComment = null;
    this.isWeiXin = utilJs.isWeiXin();
    serverIdImgArr = []; //上传图片的serverID
    //获取阿里云签名，除了微信浏览器以外
    if (!utilJs.isWeiXin()) {
      utilJs.getAliSign(`${global.apiurl}imageSign`, res => {
        imgData = res;
      });
    }
  },
  activated() {
    godId = this.$route.query.godId || '';
    gorId = this.$route.query.gorId || '';
    this.isCanUseGiftCard = (this.$route.query.isCanUseGiftCard * 1) || 0;
    this.refundType = this.$route.query.type || 1; // 1 待发货仅退款 2已发货且退货退款
    this.expressState = 0;
    if (this.refundType == 2) {
      this.reasonMap = reasonMap3;
      this.expressState = 2;
      setDocumentTitle("申请退货退款");// eslint-disable-line
    } else if (this.refundType == 1) {
      this.reasonMap = reasonMap1;
      this.expressState = 1;
      setDocumentTitle("申请退款");// eslint-disable-line
    }
    this.reasonMap.forEach((item, index) => {
      this.$set(this.reasonMap[index], 'isChecked', -1);
    })
    this.expressStateMap.forEach((item, index) => {
      this.$set(this.expressStateMap[index], 'isChecked', -1);
    })
    this.shopInfo = null;
    this.refund = null;
    this.showReason = false;
    this.type = 1;
    this.refundMoney = '';
    this.refundReason = this.$route.query.refundReason || 0;
    this.explanation = '';
    this.proofPics = [];
    this.refundReasonModalIndex = 0;
    this.expressStateModalIndex = 0;
    this.showBackMoneyEdit = false;
    this.editMoney = '';
    this.getShopRefund();
    this.wechatShare();
  },
  deactivated() {
  }
}
</script>
<style scoped>
.del-img {
  position: absolute;
  top: 0rem;
  right: 0rem;
  cursor: pointer;
  font-size: 0.25rem;
  width: 0.8rem;
  height: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  line-height: 0.8rem;
  text-align: center;
}
.del-img::before{
  z-index: 10;
}
.del-img::after{
  position: absolute;
  height: 1.8rem;
  width: 1.8rem;
  top: -0.9rem;
  right: -0.9rem;
  content: "";
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
}
.textareaPlaceholder {
  font-size: 0.55rem;
  line-height: 0.8rem;
  color: #ccc;
}
textarea {
  position: relative;
  z-index: 10;
  background: none;
  resize: none;
}
textarea::-webkit-input-placeholder {
  font-size: 0.5rem;
  line-height: 0.7rem;
  color: #ccc;
}
textarea::-moz-placeholder {
  font-size: 0.5rem;
  line-height: 0.7rem;
  color: #ccc;
}
textarea::-moz-placeholder {
  font-size: 0.5rem;
  line-height: 0.7rem;
  color: #ccc;
}
textarea::-ms-input-placeholder {
  font-size: 0.5rem;
  line-height: 0.7rem;
  color: #ccc;
}
.order-fotter {
  width: 100%;
  max-width: 16rem;
  border: 1px solid rgba(242, 242, 242, 1);
  box-shadow: 0px -6px 3px 0px rgba(132, 132, 132, 0.03);
  position: fixed;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.c-bd-dash-e6 {
  border: dashed 1px #e6e6e6;
}
</style>